<template>
    <div class="app-container">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <div class="head-container">
                    <div class="table_title">
                        {{ infoTitle.patientName }}
                        {{
                            infoTitle.gender == 0 ? "女" : infoTitle.gender == 1 ? "男" : ""
                        }}
                        {{ infoTitle.age }}岁 {{ infoTitle.admissionNum || infoTitle.outpatientNum }}
                    </div>
                    <div class="btn">
                        <el-button type="primary" size="mini" @click="addReservation"
                            style="margin-right: 5px">新增预约</el-button>
                        <el-button type="primary" size="mini" @click="returnClick">返回</el-button>
                    </div>
                </div>
            </div>
            <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="visible"
                title="新增预约" width="570px">
                <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
                    <el-form-item label="疗程" prop="exePeriod">
                        <el-input v-model="form.exePeriod" disabled />
                    </el-form-item>
                    <el-form-item label="预约次数" prop="reservationNum">
                        <el-input v-model="form.reservationNum" disabled />
                    </el-form-item>
                    <el-form-item label="预约时间" prop="reservationTime">
                        <el-date-picker v-model="form.reservationTime" type="datetime" placeholder="选择日期"
                            format="yyyy - MM - dd  HH : mm" value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预约科室" prop="reservationDepartmentCode">
                        <el-select v-model="form.reservationDepartmentCode" placeholder="请选择科室" size="small"
                            class="filter-item" style="width: 200px" clearable @change="changeCode">
                            <el-option v-for="(item, index) in departmentList" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约医生" prop="reservationDoctorId">
                        <el-select v-model="form.reservationDoctorId" placeholder="请选择预约医生" size="small"
                            class="filter-item" style="width: 200px" clearable>
                            <el-option v-for="(item, index) in doctorList" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="cancel">取消</el-button>
                    <el-button :loading="submitLoading" type="primary" @click="submitClick">确认</el-button>
                </div>
            </el-dialog>
            <el-table ref="table" v-loading="tableLoading" :data="tableList">
                <el-table-column label="序号" width="60px" prop="indexNumber">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="treatmentName" label="预约项目" />
                <el-table-column prop="exeNum" label="实际次数">
                    <template slot-scope="scope">
                        {{ scope.row.exePeriod }}/{{ scope.row.periodNum }}/{{
                            scope.row.exeNum
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="reservationNum" label="预约次数">
                    <template slot-scope="scope">
                        {{ scope.row.exePeriod }}/{{ scope.row.periodNum }}/{{
                            scope.row.reservationNum
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="reservationTime" label="预约时间" />
                <el-table-column prop="reservationDepartmentName" label="预约科室" />
                <el-table-column prop="reservationDoctor" label="预约医生" />
                <el-table-column prop="reservationDesc" label="备注" />
                <el-table-column prop="exeStates" label="状态">
                    <template slot-scope="scope">
                        <span :class="scope.row.exeStates==0 ? 'red' : ''">
                           {{
                            scope.row.exeStates == 0
                                ? "未执行"
                                : scope.row.exeStates == 1
                                    ? "已执行"
                                    : "已作废"
                        }} 
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="申请日期" />
                <el-table-column label="操作" width="130px" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="addDesc(scope.row.reservationId, scope.row.reservationDesc)">备注</el-button>
                        <el-button class="red_btn" type="text" v-if="scope.row.exeStates == 0"
                            @click="cancellation(scope.row.reservationId)">作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :page-size.sync="page.size" :page-sizes="[10, 20, 30, 50]" :total="page.total"
                :current-page.sync="page.page" style="display:flex;justify-content: center;margin-top: 8px" layout="total, prev, pager, next, sizes, jumper"
                @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" />
        </el-card>
        <DescModal ref="descModal" @search="getReservationList" />
    </div>
</template>

<script>
import { getDepartment } from "@/api/treatmentProject/treatments";
import * as ajax from "@/api/treatmentProject/app.js";
import moment from "moment";
import DescModal from "./modal/descModal.vue";
import { getEnableAdminsWithRole } from "@/api/treatment/treatment.js";
export default {
    name: "planLeft",
    components: { DescModal },
    data() {
        return {
            rules: {
                reservationTime: [
                    { required: true, message: "请选择预约时间", trigger: "change" },
                ],
            },
            departmentList: [],
            doctorList: [],
            page: {
                // 页码
                page: 1,
                // 每页数据条数
                size: 10,
                // 总数据条数
                total: 0,
            },
            tableLoading: false,
            tableList: [],
            submitLoading: false,
            form: {
                exePeriod: null,
                reservationNum: null,
                reservationTime: "",
                reservationDepartmentCode: null,
                reservationDoctorId: null,
            },
            visible: false,
            info: {},
            infoTitle: {},
        };
    },
    watch: {},
    async mounted() {
        this.info = Object.assign(this.info, JSON.parse(this.$route.query.info));
        this.infoTitle = this.info.activeRow;
        this.form.exePeriod = this.info.activeRow2.exePeriod;
        this.form.reservationNum = this.info.activeRow2.reservationNum;
        await this.getReservationList();
        await this.getDepartmentList();
    },
    methods: {
        returnClick() {
            this.$router.go(-1);
        },
        async getReservationList() {
            await ajax
                .getReservation({
                    patientId: this.info.activeRow.patientId,
                    adviceId: this.info.activeRow2.adviceId,
                    page: this.page.page,
                    size: this.page.size,
                })
                .then((res) => {
                    this.tableList = res.content.map((item) => {
                        return {
                            ...item,
                            reservationTime: item.reservationTime
                                ? moment(item.reservationTime).format("MM-DD HH:mm:ss")
                                : "",
                            createTime: item.createTime
                                ? moment(item.createTime).format("MM-DD HH:mm:ss")
                                : "",
                        };
                    });
                    this.page.total = res.totalElements
                });
        },
        //新增预约
        addReservation() {
            this.visible = true;
        },
        cancel() {
            this.visible = false;
        },
        submitClick() {
            this.$refs.form.validate().then(() => {
                this.submitLoading = true;
                ajax
                    .reservation({
                        adviceId: this.info.activeRow2.adviceId,
                        reservationTime: moment(this.form.reservationTime).format("x"),
                        reservationDepartmentCode: this.form.reservationDepartmentCode,
                        reservationDoctorId: this.form.reservationDoctorId,
                    })
                    .then((res) => {
                        this.$notify({
                            title: "预约成功",
                            type: "success",
                            duration: 2500,
                        });
                        this.submitLoading = false;
                        this.cancel();
                        this.searchBtn();
                    })
                    .catch((res) => {
                        this.$notify({
                            title: res.msg,
                            type: "error",
                            duration: 2500,
                        });
                        this.submitLoading = false;
                    });
            });
        },
        //添加备注
        addDesc(id, desc) {
            this.$refs.descModal.showModal(id, desc);
        },
        //作废
        cancellation(reservationId) {
            this.$confirm("是否确定作废该条预约", "确认提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                ajax
                    .delReservation({ reservationId })
                    .then((res) => {
                        this.$notify({
                            title: res.msg,
                            type: "success",
                            duration: 2500,
                        });
                        this.getReservationList();
                    })
                    .catch((res) => {
                        this.$notify({
                            title: res.msg,
                            type: "error",
                            duration: 2500,
                        });
                    });
            });
        },
        async getDepartmentList() {
            await getDepartment({
                page: 1,
                size: 999,
            }).then((res) => {
                this.departmentList = res.content.map((item) => {
                    return {
                        label: item.departmentName,
                        value: item.departmentCode,
                        // value: item.hisDepartmentId,
                    };
                });
            });
        },
        changeCode(val) {
            if (val) {
                this.getDoctorList(val);
            } else {
                this.form.reservationDoctorId = null;
                this.doctorList = [];
            }
        },
        getDoctorList(val) {
            getEnableAdminsWithRole({
                departmentCode: val,
            }).then((res) => {
                this.doctorList = res.content.map((item) => {
                    return {
                        label: item.realname,
                        value: item.aid,
                    };
                });
            });
        },
        searchBtn() {
            this.getReservationList();
        },
        // 当前页改变
        pageChangeHandler(e) {
            this.page.page = e;
            this.searchBtn();
        },
        // 每页条数改变
        sizeChangeHandler(e) {
            this.page.size = e;
            this.page.page = 1;
            this.searchBtn();
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.crud-opts {
    display: inline-flex;
}

.table_title {
    display: inline-block;
    line-height: 30px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    font-weight: bold;
    color: #303133;
    font-size: 15px;
}

.head-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;

    /deep/.filter-item {
        margin-bottom: 0;
    }
}
.red{
    color: #E81010;
}
.red_btn{
    color: #a30014fe;
}
</style>
